<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
    html,
    body {
        width: 100%;
    }
    </style>
</head>

<body>
    <div class="aui-content">
        <ul class="aui-waterfall" id="aui-waterfall">
            <li>
                <div class="aui-waterfall-header">
                    <img src="../image/demo1.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer">
                    <span class="aui-text-info">
                    流浪男
                </span>
                    <span class="aui-pull-right">
                    <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                </span>
                </div>
            </li>
            <li>
                <div class="aui-waterfall-header">
                    <img src="../image/demo1.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer">
                    <span class="aui-text-info">
                    流浪男
                </span>
                    <span class="aui-pull-right">
                    <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                </span>
                </div>
            </li>
            <li>
                <div class="aui-waterfall-header">
                    <img src="../image/demo1.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer">
                    <span class="aui-text-info">
                    流浪男
                </span>
                    <span class="aui-pull-right">
                    <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                </span>
                </div>
            </li>
            <li>
                <div class="aui-waterfall-header">
                    <img src="../image/demo1.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer">
                    <span class="aui-text-info">
                    流浪男
                </span>
                    <span class="aui-pull-right">
                    <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                </span>
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<!-- <script type="text/javascript" src="../script/aui.js"></script> -->
<script type="text/javascript" src="../script/aui-waterfall.js"></script>
<script type="text/javascript">
apiready = function() {
    $aui.waterfall($api.byId("aui-waterfall"), {
        col: 2, //列数
        padding: 10, //容器内边距
        space: 10 //列间距
    });
};
</script>

</html>
